<template>
  <header id="site-header" class="fixed-top">
    <section class="w3l-header-4">
      <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light">
          <a class="navbar-brand" href="#">
            <img src="../assets//imgs/logo-公司全名.png" width="180" alt="" />
          </a>

          <button
            class="navbar-toggler collapsed"
            type="button"
            data-toggle="collapse"
            data-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="fa icon-expand fa-bars" tabindex="-1"></span>
            <span class="fa icon-close fa-times"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav mx-lg-auto">
              <li class="nav-item active">
                <a class="nav-link" href="index.html">首页</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="about.html">关于</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="services.html">服务</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="contact.html">联系</a>
              </li>
            </ul>

            <ul class="navbar-nav search-right mt-lg-0 mt-2">
              <li class="nav-item mr-3" title="Search">
                <a href="#search" class="btn search-search">
                  <span class="fa fa-search" aria-hidden="true"></span>
                </a>
              </li>
              <li class="nav-item">
                <a
                  href="tel:+(12)234-11-24"
                  class="btn btn-primary btn-style d-none d-lg-block btn-style mr-2">
                  <span class="fa fa-phone mr-3" aria-hidden="true"></span>
                  (86)-88548600
                </a>
              </li>
            </ul>

            <!-- Search popup -->
            <div id="search" class="pop-overlay">
              <div class="popup">
                <form action="#" method="GET" class="d-sm-flex">
                  <input
                    type="search"
                    placeholder="Search.."
                    name="search"
                    required
                    autofocus />
                  <button type="submit">Search</button>
                  <a class="close" href="#url">&times;</a>
                </form>
              </div>
            </div>
            <!-- /Search popup -->
          </div>

          <!-- Theme toggle switch -->
          <div class="mobile-position">
            <nav class="navigation">
              <div class="theme-switch-wrapper">
                <label class="theme-switch" for="checkbox">
                  <input type="checkbox" id="checkbox" v-model="isDark" />
                  <div class="mode-container">
                    <i class="gg-sun" tabindex="-1"></i>
                    <i class="gg-moon" tabindex="-1"></i>
                  </div>
                </label>
              </div>
            </nav>
          </div>
        </nav>
      </div>
    </section>
  </header>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";

const isDark = ref(false);
const currentTheme = localStorage.getItem("theme");

onMounted(() => {
  if (currentTheme) {
    document.documentElement.setAttribute("data-theme", currentTheme);
    isDark.value = currentTheme === "dark";
  }
});

watch(isDark, (newValue) => {
  const theme = newValue ? "dark" : "light";
  document.documentElement.setAttribute("data-theme", theme);
  localStorage.setItem("theme", theme);
});
</script>

<style scoped></style>
